<script lang="ts" setup>
	import { ref, reactive, inject, toRefs } from "vue";
	import evaluate from "@/components/evaluate/evaluate.vue";
	import geekSku from "@/components/geek-sku/components/geek-sku/geek-sku.vue"
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getCurrentInstance
	} from 'vue'
	import {
		userStore
	} from '@/pinia';
	import {
		useRouter
	} from 'uni-mini-router';

	import * as im from '@/common/im.js';

	const {
		proxy,
	} = getCurrentInstance()
	const userStoreInfo = userStore();
	let router = useRouter()
	let postId = ref()
	onLoad((options) => {
		console.log(options.id, 'options.id');
		postId.value = options.id
		// getDetail(postId.value)
	})
	onShow(() => {
		getDetail(postId.value)
	})
	let juanObj = ref({})
	let detailObj = ref(null)
	let jusnList = ref([])
	const getDetail = (id) => {
		//获取详情
		proxy.$req('GET', proxy.$api.goodsDetail, {
			id,
		}).then((res) => {
			console.log(res, '商品详情');
			detailObj.value = res.result
			detailObj.value.imageContent = detailObj.value.imageContent.replace(/\<img/gi, '<img style="width:100%;height:auto;"')
			if (detailObj.value.specType == 0) {
				skus.value = [
					{
						id: 1,
						price: detailObj.value.price,
						stock: detailObj.value.stock,

					},
				]
			} else {
				skus.value = detailObj.value.meiyeShoppingProductSkuList ? detailObj.value.meiyeShoppingProductSkuList : []
			}
			console.log(skus.value, 'skus.value');
			getJuanList()
			getPinlun()
			detailObj.value.notes = detailObj.value.notes.replace(/\<img/gi, '<img style="width:100%;height:auto;"')
			//构建sku对象--暂弃
			// let nameArr = detailObj.value.meiyeShoppingProductSkuList.map((item) => {
			// 	return item.specName
			// })
			// let labelNum = [...new Set(nameArr)]
			// console.log(labelNum);
			// skus.value = detailObj.value.meiyeShoppingProductSkuList.map((item, index) => {
			// 	item.sku_attrs = {}
			// 	for (let i = 0; i < labelNum.length; i++) {
			// 		if (labelNum[i] == item.specName) {
			// 			item.sku_attrs[labelNum[i]] = item.specValue
			// 		} else {
			// 			item.sku_attrs[labelNum[i]] = ''
			// 		}
			// 	}
			// 	return item
			// })
			// console.log(skus.value);
		})
	}
	let pinglunList = ref([])
	const getPinlun = () => {
		proxy.$req('GET', proxy.$api.goodsPinlun, {
			productIds: postId.value,
			pageNo: 1,
			pageSize: 50
		}).then((res) => {
			pinglunList.value = res.result.records
		})
	}
	const getJuanList = () => {
		//获取优惠卷
		proxy.$req('POST', proxy.$api.xiadanJuan, {
			storeIds: [detailObj.value.meiyeSupplier.id],
			status: 0,
			pageNo: 1,
			pageSize: 50
		}).then((res) => {
			jusnList.value = res.result.records
		})
	}
	const routerLink = (e) => {
		router.push({
			name: e,
			params: {}
		})
	}
	const goBusiness = () => {
		router.push({
			name: 'goodsBusiness',
			params: {
				data: JSON.stringify(detailObj.value)
			}
		})
	}
	let skuShow = ref(false);
	// sku列表
	let skus = ref([
		// {
		// 	id: 1,
		// 	price: 7000,
		// 	stock: 30,
		// 	sku_attrs: {
		// 		'机身颜色': '深空黑色',
		// 		'储存容量': '128G',
		// 		'套装': '快充套装'
		// 	}
		// },
		// {
		// 	id: 2,
		// 	price: 8500,
		// 	stock: 10,
		// 	sku_attrs: {
		// 		'机身颜色': '暗紫色',
		// 		'储存容量': '256G',
		// 		'套装': '快充套装'
		// 	}
		// },
		// {
		// 	id: 3,
		// 	price: 9500,
		// 	stock: 0,
		// 	sku_attrs: {
		// 		'机身颜色': '暗紫色',
		// 		'储存容量': '512G',
		// 		'套装': 'AirPods套装'
		// 	}
		// },
		// {
		// 	id: 4,
		// 	price: 9200,
		// 	stock: 60,
		// 	sku_attrs: {
		// 		'机身颜色': '银色',
		// 		'储存容量': '512G',
		// 		'套装': 'AirPods套装'
		// 	}
		// },
		// {
		// 	id: 5,
		// 	price: 9200,
		// 	stock: 80,
		// 	sku_attrs: {
		// 		'机身颜色': '金色',
		// 		'储存容量': '512G',
		// 		'套装': 'AirPods3套装'
		// 	}
		// }
	])

	// sku发生改变事件, 选择完整的sku则回返回 否则sku的值为{}
	let skuChange = (sku) => {
		console.log(sku);
	}
	const useJuan = (item) => {
		juanObj.value = item
		uni.showToast({
			title: '已选择',
			icon: 'none'
		})
		youhuiShow.value = false
	}
	// sku确认事件
	let skuConfirm = (e) => {
		console.log(e);
		if (skuBtnText.value == '购买') {
			//type1是结算单个商品
			let data = {
				type: 1,
				sku: e,
				goodObj: detailObj.value,
				juanObj: juanObj.value,
				startTime: null,
				endTime: null,
				goodType: 0
			}
			router.push({
				name: 'submitOrder',
				params: {
					data: JSON.stringify(data)
				}
			})
		} else {
			console.log(e, "打印e滴答滴答滴答滴答")
			addCart(e)
		}
		// proxy.$req('GET', proxy.$api.addOrder, {
		// 	orderType: 0,
		// 	realName: '',
		// 	userPhone: '',
		// 	userAddress: '',
		// 	couponId: '',
		// 	orderInfoList: {
		// 		skuId: '',
		// 		cartId: ''
		// 	},
		// 	productId: '',
		// 	cartNum: ''
		// }).then((res) => {

		// })


	}
	let topTabs = ref([{
		name: '商品',
	}, {
		name: '评价',
	}, {
		name: '详情'
	}])
	let goodsTabsList = ref([{
		name: '图文详情',
	}, {
		name: '购买须知',
	}])
	const topTabsClick = (e) => {
		console.log(e)
		switch (e.name) {
			case '商品':
				uni.pageScrollTo({
					selector: '.navbar',
					duration: 100,
				})
				break;
			case '评价':
				uni.pageScrollTo({
					selector: '.pjDing',
					duration: 100,
				})
				break;
			case '详情':
				uni.pageScrollTo({
					selector: '.goodsTabs',
					duration: 100,
				})
				break;
		}
	}
	const goodsTabsClick = (e) => {
		console.log(e);
		switch (e.name) {
			case '图文详情':
				uni.pageScrollTo({
					selector: '.rtDing',
					duration: 100,
				})
				break;
			case '购买须知':
				uni.pageScrollTo({
					selector: '.xzDing',
					duration: 100,
				})
				break;
		}
	}
	let swiperList = ref([])
	let youhuiShow = ref(false)
	let youhuiClose = () => {
		//关闭优惠弹框
		youhuiShow.value = false
	}
	let skuBtnText = ref('购买')
	const addCart = (e) => {
		console.log(e);
		//添加购物车--
		let sid;
		if (detailObj.value.specType == 0) {
			sid = null
		} else {
			sid = e.sku.id
		}

		let a = {
			cartNum: e.num,
			// memberId: userStoreInfo.userInfo.id,
			productId: detailObj.value.id,
			skuId: sid,
			storeId: detailObj.value.meiyeSupplier.id,
			type: 0
		}
		console.log(a, "打印加入购物车参数")
		proxy.$req('POST', proxy.$api.addCart, {
			cartNum: e.num,
			// memberId: userStoreInfo.userInfo.id,
			productId: detailObj.value.id,
			skuId: sid,
			storeId: detailObj.value.meiyeSupplier.id,
			type: 0
		}).then((res) => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			skuShow.value = false
		})
	}
	const opJuan = () => {
		//领卷前判断是否为商家会员
		proxy.$req('GET', proxy.$api.isNowBusVip, {
			storeId: detailObj.value.meiyeSupplier.id,
		}).then((res) => {
			console.log(res);
			if (res.result == 1 && jusnList.value.length > 0) {
				youhuiShow.value = true
			} else {
				router.push({
					name: 'goodsBusinessVip',
					params: {
						obj: JSON.stringify(detailObj.value.meiyeSupplier)
					}
				})
			}
		})

	}

	// 聊一聊
	const toIm = () => {
		const { memberId } = detailObj.value;
		console.log('state.detailsData', detailObj.value, memberId);
		
		const userId = userStoreInfo.userInfo.id;
			
		if(userId == memberId){
			alert("不能和自己聊天");
			return ;
		}
		// #ifdef APP-PLUS
		im.init({
			imFlag: 'customerService',
			toUserId: memberId,
		}, () => {
			router.push({
				// name: 'ConversationListPage',
				name: 'ConversationPage',
			})
		})
		// #endif

		router.push({
			// name: 'ConversationListPage',
			name: 'ConversationPage',
		})
	}
	const collectGoods = () => {
		if (!detailObj.value.isColl) {
			//收藏
			proxy.$req('POST', proxy.$api.meiyeCollection2Add, {
				colType: 1,
				colProductId: detailObj.value.id,
				colOperateType: 1
			}).then((res) => {
				if (res.success) {
					//收藏成功
					detailObj.value.isColl = res.result.colId
				}
			})
		} else {
			//取消收藏
			proxy.$req('DELETE', proxy.$api.meiyeCollection2Delete, {
				id: detailObj.value.isColl,
			}).then((res) => {
				if (res.success) {
					detailObj.value.isColl = 0
				}
			})
		}
	}
	const allEva = (list) => {
		if (list.length < 1) {
			uni.$u.toast('暂无更多')
			return
		}
		router.push({
			name: 'goodsEvaluate',
			params: {
				list: JSON.stringify(list)
			}
		})
	}
</script>
<template>
	<view class="navbar">
		<u-navbar :placeholder="true" leftText="" title="" auto-back>
			<template #center>
				<view style="width: 80%;display: flex;justify-content: center;">
					<u-tabs :list="topTabs" lineColor="#F56C6C" @click="topTabsClick"></u-tabs>
				</view>
			</template>
		</u-navbar>
	</view>
	<template v-if="detailObj!=null">
		<view class=""></view>
		<u-swiper :list="detailObj.imageUrlList" height="748rpx"></u-swiper>
		<view class="goodsCon">
			<view class="white1">
				<view class="gcPrice r-flex-start-end">
					<text class="hui">会员价</text>
					<text class="hong intFont"><text style="font-size: 36rpx;">￥</text>{{ detailObj.vipPrice }}</text>
					<text class="hui intFont">平台价 ￥{{ detailObj.price }}</text>
					<text class="tags" v-if="detailObj.isPostage==1">包邮</text>
				</view>
				<view class="gcTit">
					{{ detailObj.name }}
				</view>
			</view>
			<view class="white2">
				<!-- routerLink('businessCoupon') -->
				<view class="lingjuan">
					<view class="lj1 ">
						<text v-if="jusnList.length>0">
							<text v-for="(item,index) in jusnList" :key="index" class="xxx">
								{{ item.couponTitle }}
							</text>
						</text>
						<text class="xxx" v-else>暂无可选</text>
					</view>
					<view class="lj2" @click="opJuan">
						领券
					</view>
				</view>
				<view class="shuoming r-flex-center-center" style="flex-wrap: wrap;"
					v-if="detailObj.isServiceList!=null">
					<view class="r-flex-center-center" v-for="(item,index) in detailObj.isServiceList" :key="index">
						<image src="http://image.qiniu.qdytcy.com/2023/7/12/redGou.png" mode=""></image>
						<text>{{ item.paramValue }}</text>
					</view>
				</view>
			</view>
			<u-popup :show="youhuiShow" :round="12" @close="youhuiClose">
				<view style="height: 1300rpx;border-radius: 24rpx 24rpx 0rpx 0rpx;padding: 0 32rpx;">
					<view class="r-flex-between-center" style="height: 110rpx;">
						<text> </text>
						<text style="font-size: 36rpx;font-weight: 500;">优惠券</text>
						<u-icon name="close" @click="youhuiShow=false"></u-icon>
					</view>
					<view class="youhuijuan r-flex-center-center" v-for="(item,index) in jusnList" :key="index">
						<view class="left c-flex-center-center">
							<view>
								<text
									style="font-size: 42rpx;font-weight: bold;color: #FFFFFF;margin-right: 6rpx;">￥</text>
								<text
									style="font-size: 80rpx;font-weight: bold;color: #FFFFFF;">{{ item.couponPrice }}</text>
							</view>
							<text style="font-size: 24rpx;font-weight: 400;color: #FFFFFF;">店铺优惠券</text>
						</view>
						<view class="right">
							<view class="rt">
								<text>限该店内使用</text>
								<text>{{ item.couponTitle }}</text>
							</view>
							<view class="rb r-flex-between-center">
								<view class="rb1">
									有效期至<br />
									{{ item.endTime }}
								</view>
								<view class="rb2" @click="useJuan(item)">
									使用
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<view class="pingjia">
				<view class="pjDing"></view>
				<view class="pjTit">
					<text>商品评价<text style="font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0,0,0,0.45);">（{{ pinglunList.length }}）</text></text>
					<view class="pjr r-flex-center-center" @click="allEva(pinglunList)">
						<text>查看全部</text><u-icon name="arrow-right" size="24rpx"></u-icon>
					</view>
				</view>
				<evaluate :list="pinglunList.slice(0,1)"></evaluate>
			</view>
			<view class="businessBox">
				<view class="bbl">
					<image class="" :src="detailObj.meiyeSupplier.storeImage" mode=""></image>
					<view class="bblc">
						<text style="font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;">{{ detailObj.meiyeSupplier.storeName }}</text>
						<text style="font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0,0,0,0.45);">{{ detailObj.meiyeSupplier.storeDescription }}</text>
					</view>
				</view>
				<view class="bbr" @click="goBusiness()">
					<text>进店逛逛</text>
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
			</view>
			<view class="goodsTabs">
				<u-tabs :list="goodsTabsList" lineColor="#F56C6C" @click="goodsTabsClick"></u-tabs>
			</view>
			<view class="goodsDetail">
				<view class="richText">
					<view class="rtDing"></view>
					<view class="" v-html="detailObj.imageContent"></view>
				</view>
				<view class="xuzhi">
					<view class="xzDing"></view>
					<view class="" v-html="detailObj.notes"></view>
				</view>
			</view>
		</view>
		<view class="payBox">
			<view class="pbl">
				<view class="pbli" @click="toIm">
					<u-icon name="server-man" size="40rpx"></u-icon>
					<text>客服</text>
				</view>
				<view class="pbli" @click="routerLink('shopCart')">
					<u-icon name="shopping-cart" size="40rpx"></u-icon>
					<text>购物车</text>
				</view>
				<view class="pbli" @click="collectGoods">
					<u-icon :name="!detailObj.isColl?'star':'star-fill'" size="40rpx"
						:color="!detailObj.isColl?'':'#F4CF5A'"></u-icon>
					<text>收藏</text>
				</view>
			</view>
			<view class="pbr">
				<view class="p1" @click="skuShow = true;skuBtnText='加入购物车'">
					加入购物车
				</view>
				<view class="p2" @click="skuShow = true;skuBtnText='购买'">
					立即购买
				</view>
			</view>
		</view>
		<geek-sku v-model="skuShow" :data="skus" :themeColor="[203, 100, 94]" :defaultCover="detailObj.image"
			:btnConfirmText="skuBtnText" notSelectSku="请选择完整的商品信息" :isSelectMinPriceSku="false" :defaultNum="1"
			@skuChange="skuChange" @confirm="skuConfirm"></geek-sku>
	</template>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.youhuijuan {
		width: 686rpx;
		height: 224rpx;
		background-color: #fff;
		border: 2rpx solid rgba(203, 100, 94, 0.24);
		border-radius: 24rpx;
		margin: 16rpx auto;
		border-left: none;

		.left {
			width: 258rpx;
			height: 100%;
			background-image: url('../../../static/images/juan.png');
		}

		.right {
			width: 364rpx;
			height: 100%;
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 30rpx;

			.rt {
				margin-top: 32rpx;
				margin-bottom: 58rpx;

				text:nth-child(1) {
					display: inline-block;
					width: 152rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: linear-gradient(270deg, #FFF1EE 0%, #FEEFF1 47%, #FEEAF6 100%);
					border-radius: 20rpx;
					font-size: 20rpx;
					font-weight: 600;
					color: #F22F19;
					margin-right: 16rpx;
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}
			}

			.rb {
				.rb1 {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
					line-height: 1.5;
				}

				.rb2 {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #CB645E;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	.pjDing,
	.rtDing,
	.xzDing {
		width: 2rpx;
		height: 2rpx;
		position: absolute;
		top: -120rpx;
	}


	.navbar {
		width: 100%;
		height: 100rpx;
	}

	.goodsCon {
		width: 686rpx;
		padding: 0rpx 0rpx 150rpx;
		margin: 0 auto;

		.white1 {
			width: calc(100% - 64rpx);
			margin: 32rpx 0;
			background-color: #fff;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			padding: 24rpx 32rpx 32rpx;

			.gcPrice {
				margin-bottom: 20rpx;

				.hui {
					font-size: 24rpx;
					margin-right: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.65);
				}

				.hong {
					color: #F22F19;
					font-size: 58rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: 600;
					margin-right: 20rpx;
				}

				.tags {
					display: inline-block;
					width: 78rpx;
					height: 34rpx;
					line-height: 34rpx;
					text-align: center;
					background: #F9EFEE;
					border-radius: 18rpx;
					font-size: 20rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #CB645E;
				}
			}

			.gcTit {
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
			}
		}

		.white2 {
			width: 100%;
			margin: 32rpx 0;
			background-color: #fff;
			border-radius: 24rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;

			.lingjuan {
				width: calc(100% - 64rpx);
				display: flex;
				justify-content: space-between;
				align-items: center;
				// height: 112rpx;
				padding: 32rpx 32rpx;

				.lj1 {
					.xxx {
						margin: 10rpx 0;
						padding: 8rpx 16rpx;
						display: inline-block;
						background: linear-gradient(270deg, #FFF1EE 0%, #FEEFF1 47%, #FEEAF6 100%);
						border-radius: 26rpx;
						margin-right: 30rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #F22F19;
					}
				}

				.lj2 {
					width: 96rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: #CB645E;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.shuoming {
				width: 100%;
				// height: 68rpx;
				background-color: #F2F2F2;
				border-top-left-radius: 0rpx;
				border-top-right-radius: 0rpx;
				border-bottom-right-radius: 24rpx;
				border-bottom-left-radius: 24rpx;
				padding: 16rpx 0;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				text {
					margin-right: 30rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.25);
				}
			}
		}


		.pingjia {
			position: relative;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			margin-top: 30rpx;
			width: calc(100% - 64rpx);
			margin: 32rpx 0;
			background-color: #fff;
			border-radius: 24rpx;
			padding: 32rpx;

			.pjTit {
				display: flex;
				justify-content: space-between;
				font-size: 32rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.85);

				.pjr {
					font-size: 24rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.45);
					display: flex;
					justify-content: center;
				}
			}
		}

		.businessBox {
			width: calc(100% - 64rpx);
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 44rpx 32rpx;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;

			.bbl {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50rpx;
					margin-right: 30rpx;
				}

				.bblc {
					display: flex;
					flex-direction: column;

					text:nth-child(1) {
						font-weight: 600;
						font-size: 32rpx;
					}

					text:nth-child(2) {
						font-size: 28rpx;
					}
				}
			}


			.bbr {
				display: flex;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.45);
			}
		}

		.goodsTabs {
			display: flex;
			justify-content: center;
		}

		.goodsDetail {
			padding: 50rpx 0;

			.richText {
				position: relative;
			}

			.xuzhi {
				position: relative;
			}
		}


	}

	.payBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		box-shadow: inset 0rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		background-color: #fff;

		.pbl {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.pbli {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-direction: column;
				margin: 0 18rpx;
				font-size: 20rpx;
			}
		}

		.pbr {
			display: flex;
			align-items: center;

			view {
				border-radius: 20rpx;
			}

			.p2 {
				width: 208rpx;
				height: 88rpx;
				background: #CB645E;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			.p1 {
				width: 208rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				border: 2rpx solid #CB645E;
				margin-right: 20rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #CB645E;
			}
		}
	}
</style>